<template>
  <div>
    <!-- 导航栏 -->
    <div class="title">
      <img
        src="../../assets/images/cz1.png"
        alt=""
        class="goback"
        @click="goback"
      />
      {{ $t("long.dingdanxiangqing") }}
    </div>
    <!-- 主体 -->
    <div class="bigBox">
      <p class="navBarOne">{{ $t("common.heyue") }}</p>
      <p class="navBarTwo">{{ detail.symbolName }} {{ $t("common.yongxu") }}</p>
      <div class="fx">
        <!-- <van-icon
          name="checked"
          :color="
            detail.status == $t('long.wanquanchengjiao')
              ? 'rgb(0, 167, 127)'
              : '#8992AE'
          "
          size="16px"
        /> -->
        <img :src="iconImg" alt="" class="iconimg" />
        <p
          class="navBarThree"
          :class="
            detail.status == $t('long.wanquanchengjiao') ||
            detail.status == $t('long.bufenchengjiao')
              ? 'green'
              : 'hui'
          "
        >
          {{ handleStatus(detail.status) }}
        </p>
      </div>
    </div>

    <!-- 第一个盒子 -->
    <div class="navBarBox">
      <div>
        <div class="fx mag">
          <span class="magBox">{{ $t("long.dingdanhao") }}</span>
          <div class="capyNub">
            <span>{{ detail.id }}</span>
            <img
              src="../../assets/images/cz4.png"
              alt=""
              @click="copyLink(detail.id)"
            />
          </div>
        </div>
        <div class="fx mag">
          <span class="magBox">{{ $t("common.leixing") }}</span>
          <span
            class="magOne"
            :class="
              (detail.type && detail.type.includes('多')) ||
              (detail.sideType && detail.sideType.includes('多'))
                ? 'green'
                : 'red'
            "
            >{{ handleAllType(detail.type) }}</span
          >
        </div>
        <div class="fx mag" v-if="type == 'order'">
          <span class="magBox"
            >{{ $t("long.chengjiaoshuliang") }} ({{
              tokenOrMain != "zhang"
                ? tokenOrMain == "main"
                  ? detail.mainCurName
                  : detail.tokenCurName
                : $t("common.zhang")
            }})</span
          >
          <span class="magOne">{{
            tokenOrMain != "zhang"
              ? tokenOrMain == "main"
                ? detail.currencyDealNum
                : detail.dealNum
              : $formatMoney(parseInt(detail.dealNum * detail.sheet),11)
          }}</span>
        </div>
        <div class="fx mag">
          <span class="magBox"
            >{{ $t("long.weituoshuliang") }} ({{
              tokenOrMain != "zhang"
                ? tokenOrMain == "main"
                  ? detail.mainCurName
                  : detail.tokenCurName
                : $t("common.zhang")
            }})</span
          >
          <span class="magOne">{{
            tokenOrMain != "zhang"
              ? tokenOrMain == "main"
                ? detail.currencyNum
                : detail.num
              : $formatMoney(parseInt(detail.num * detail.sheet),11)
          }}</span>
        </div>
        <div class="fx mag magLast" v-if="type == 'order'">
          <span class="magBox">{{ $t("long.chengjiaojiage") }}</span>
          <span class="magOne">{{ detail.price }}</span>
        </div>
        <div
          class="mag magLast"
          style="text-align: left"
          v-if="detail.stopLostPrice || detail.stopProfitPrice"
        >
          <div class="fx mag">
            <span class="magBox">{{ $t("long.zhiyingchufajia") }} (USDT)</span>
            <span class="magOne"
              >{{ detail.stopProfitTrigger }} ({{
                $t("common.biaojijiage")
              }})</span
            >
          </div>
          <div class="fx mag">
            <span class="magBox">{{ $t("long.zhiyingweituojia") }}</span>
            <span class="magOne">{{ detail.stopProfitPrice }}</span>
          </div>
          <div class="fx mag">
            <span class="magBox">{{ $t("long.zhisungchufajia") }} (USDT)</span>
            <span class="magOne"
              >{{ detail.stopLostTrigger }} ({{
                $t("common.biaojijiage")
              }})</span
            >
          </div>
          <div class="fx mag">
            <span class="magBox">{{ $t("long.zhisungweituojia") }}</span>
            <span class="magOne">{{ detail.stopLostPrice }}</span>
          </div>
        </div>
      </div>

      <div v-if="type == 'order'">
        <div class="fx mag">
          <span class="magBox">{{ $t("long.shouxufei") }}</span>
          <span class="magOne">{{ detail.handlingFee }} USDT</span>
        </div>
        <div class="fx mag">
          <span class="magBox">{{ $t("long.shixianyingkui") }}</span>
          <span class="magOne">{{
            detail.profit ? detail.profit + " USDT" : "--"
          }}</span>
        </div>
        <div class="fx mag">
          <span class="magBox">{{ $t("long.weituoshijian") }}</span>
          <span class="magOne">{{ detail.createTime }}</span>
        </div>
        <div class="fx mag magLastOne">
          <span class="magBox">{{ $t("common.shouyilv") }}</span>
          <span class="magOne">{{
            detail.profitRate ? detail.profitRate + "%" : "--"
          }}</span>
        </div>
      </div>
    </div>

    <!-- 第二个盒子 -->
    <div class="navBarBig" v-if="detail.tradeList && detail.tradeList.length">
      <div v-for="(item, index) in detail.tradeList" :key="index">
        <p>{{ $t("long.chengjiaomingxi") }}</p>
        <div class="fx magTwo">
          <span class="magBox">{{ $t("long.riqi") }}</span>
          <span>{{ item.createTime }}</span>
        </div>
        <div class="fx magTwo">
          <span class="magBox">{{ $t("common.shuliang") }}</span>
          <span
            >{{
              tokenOrMain != "zhang"
                ? tokenOrMain == "main"
                  ? item.currencyNum
                  : item.num
                : $formatMoney(parseInt(item.num * detail.sheet),11)
            }}
            {{
              tokenOrMain != "zhang"
                ? tokenOrMain == "main"
                  ? detail.mainCurName
                  : detail.tokenCurName
                : $t("common.zhang")
            }}</span
          >
        </div>
        <div class="fx magTwo">
          <span class="magBox">{{ $t("common.jiage") }}</span>
          <span>{{ item.price }} USDT</span>
        </div>
        <div class="fx magTwo" v-show="false">
          <span class="magBox">{{ $t("long.yishixianyingkui") }}</span>
          <span>{{ item.handlingFee }} USDT</span>
        </div>
        <div class="fx magTwo magLast">
          <span class="magBox">{{ $t("long.shouxufei") }}</span>
          <span>{{ item.handlingFee }} USDT</span>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      tokenOrMain: "",
      detail: {},
      zid: "",
      type: "order",
    };
  },
  activated() {
    this.tokenOrMain = this.$route.query.tokenOrMain;
    this.zid = this.$route.query.zid;
    this.type = this.$route.query.type;
    this.detail = {};
    this.getInfo();
  },
  computed: {
    iconImg() {
      if (this.detail.status == "完全成交") {
        return require("@/assets/images/dd-wanquanchegnjiao.png");
      }
      if (this.detail.status == "部分成交") {
        return require("@/assets/images/dd-bufenchengjiao.png");
      }
      if (this.detail.status == "已过期") {
        return require("@/assets/images/dd-guoqi.png");
      }
      if (this.detail.status == "已撤销") {
        return require("@/assets/images/dd-chexiao.png");
      }
      return require("@/assets/images/dd-guoqi.png");
    },
  },
  methods: {
    handleAllType(type) {
      if (type) {
        if (this.type == "order") {
          let type_arr = type.split("/");
          return (
            this.handleType(type_arr[0]) +
            "/" +
            this.handleSideType(type_arr[1])
          );
        } else {
          return (
            this.handleStopType(this.detail.type) +
            "/" +
            this.handleSideType(this.detail.sideType)
          );
        }
      } else {
        return "";
      }
    },
    handleType(status) {
      switch (status) {
        case "市价单":
          return this.$t("long.shijiadan");
        case "限价单":
          return this.$t("long.xianjiadan");
        case "强平单":
          return this.$t("long.qiangpingdan");
      }
    },
    handleSideType(side) {
      switch (side) {
        case "平多":
          return this.$t("long.pingduo");
        case "平空":
          return this.$t("long.pingkong");
        case "开多":
          return this.$t("common.kaiduo");
        case "开空":
          return this.$t("common.kaikong");
      }
    },
    handleStopType(status) {
      // 限价止损  市价止损   限价止盈  市价止盈  限价止损限价止盈  限价止损市价止盈  市价止损  限价止盈  市价止损市价止盈
      switch (status) {
        case "限价止损":
          return this.$t("common.xianjia") + this.$t("common.zhisun");
        case "市价止损":
          return this.$t("common.shijia") + this.$t("common.zhisun");
        case "限价止盈":
          return this.$t("common.xianjia") + this.$t("common.zhiying");
        case "市价止盈":
          return this.$t("common.shijia") + this.$t("common.zhiying");
        case "限价止损限价止盈":
          return (
            this.$t("common.xianjia") +
            this.$t("common.zhisun") +
            this.$t("common.xianjia") +
            this.$t("common.zhiying")
          );
        case "限价止损市价止盈":
          return (
            this.$t("common.shijia") +
            this.$t("common.zhisun") +
            this.$t("common.shijia") +
            this.$t("common.zhiying")
          );
        case "市价止损市价止盈":
          return (
            this.$t("common.shijia") +
            this.$t("common.zhisun") +
            this.$t("common.shijia") +
            this.$t("common.zhiying")
          );
      }
    },
    handleStatus(status) {
      switch (
        status //3完全成交、4已撤销、5已过期 2部分成交  （0待生效、1处理中、2已生效、3已撤销、4已过期）
      ) {
        case "完全成交":
          return this.$t("long.wanquanchengjiao");
        case "已撤销":
          return this.$t("long.yichexiao");
        case "部分成交":
          return this.$t("long.bufenchengjiao");
        case "已过期":
          return this.$t("long.yiguoqi");
        case "待生效":
          return this.$t("long.daishengxiao");
        case "处理中":
          return this.$t("long.chulizhong");
        case "已生效":
          return this.$t("long.yishengxiao");
      }
    },
    async getInfo() {
      const ret = await this.$http({
        url:
          this.type === "order"
            ? `/contract/app/order/history/${this.zid}`
            : `/contract/app/stoporder/history/${this.zid}`,
        method: "get",
      });
      if (ret.data.code === 0) {
        //
        this.detail = ret.data.data;
      }
    },
    copyLink(val) {
      // 复制链接  val 就是你需要复制的链接
      this.$copyText(val).then(
        () => {
          this.$toast(this.$t("common.fuzhicheng"));
        },
        () => {
          this.$toast(this.$t("common.fuzhishi"));
        }
      );
    },
    goback() {
      this.$router.go("-1");
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  font-size: 3.7333vw;
}
.title {
  font-size: 4.8vw;
  line-height: 44px;
  background-color: #090A1B;
  color: rgba(255, 255, 255, 100);
  text-align: center;
  //font-family: Arial;
  margin-bottom: 2vw;
  position: fixed;
  top: 0;
  z-index: 10;
  width: 100vw;
  .img {
    position: absolute;
    top: 3.6vw;
    right: 4vw;
    display: flex;
    justify-content: space-between;
    img {
      width: 5vw;
    }
  }
  .goback {
    position: absolute;
    top: 3vw;
    left: 2vw;
    width: 5.33vw;
    height: 5.33vw;
  }
}
p {
  margin-bottom: 0;
}
.fx {
  display: flex;
  justify-content: center;
  align-items: center;
}

#app[data-v-7ba5bd90] {
  background-color: #090A1B;
}

.navBar {
  background-color: #090A1B;
}

.van-nav-bar__title {
  color: #fff;
  font-size: 18px;
}
.van-nav-bar .van-icon {
  width: 20px;
  height: 20px;
  color: #8992AE;
}
[class*="van-hairline"]::after {
  border-bottom: none;
}
.van-icon-arrow-left:before {
  color: #8992AE;
}

.bigBox {
  margin-top: 60px;
}
.navBarOne {
  margin-top: 14px;
  color: #8992AE;
  font-size: 14px;
}
.navBarTwo {
  margin: 10px 0 8px 0;
  font-size: 15px;
  font-weight: 600;
}
.navBarThree {
  color: rgb(0, 167, 127);
  font-size: 15px;
  font-weight: 600;
}

.van-icon-checked:before {
  margin-right: 4px;
}

.navBarBox {
  padding: 16px 13px 0 13px;
  background-color: #090A1B;
  margin: 16px 0 8px 0;
}

.navBarBig {
  padding: 16px 13px 0 13px;
  background-color: #090A1B;
  margin-top: -8px;
}

.mag {
  justify-content: space-between;
  margin-bottom: 16px;
  // font-size: 14px;
}
.magTwo {
  justify-content: space-between;
  margin-bottom: 16px;
  // font-size: 12px;
}
.magOne {
  // font-size: 12px;
}

.magBox {
  color: #8992AE;
}

.magLast {
  border-bottom: 1px solid #333540;
  padding-bottom: 16px;
}
.boxLast {
  margin-bottom: -8px;
  padding-bottom: 16px;
}

.magLastOne {
  padding-bottom: 24px;
}

.navBarBig p {
  text-align: left;
  font-size: 14px;
  margin-bottom: 16px;
}

.red {
  color: #e45360;
}
.green {
  color: #5eba89;
}
.hui {
  color: #8992AE;
}

.capyNub img {
  width: 14px;
  height: 14px;
  margin-left: 8px;
}
.iconimg {
  width: 16px;
  margin-right: 4px;
}
</style>